<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <link rel="icon" href="biaoz.jpg">
</head>
<style>
    .black {
        background-color: black;
        width: 800px;
        height: 1000px;
        display: inline-block;
        box-sizing: border-box;
        z-index: -1;
    }
    
    .yellow {
        background-color: yellow;
        width: 500px;
        height: 1000px;
        display: inline-block;
        position: relative;
        bottom: 1000px;
        left: 800px;
    }
    
    .container {
        width: 1400px;
        height: 1100px;
        background-color: white;
        box-sizing: border-box;
        padding: 50px;
        margin: 0 auto;
    }
    
    p {
        color: yellow;
    }
    
    .A {
        width: 180px;
        height: 40px;
        padding-top: 220px;
        padding-left: 60px;
    }
    
    .a {
        font-size: 40px;
    }
    
    .D {
        width: 350px;
        height: 80px;
        padding-left: 60px;
        padding-top: 60px;
    }
    
    .f {
        font-size: 60px;
        animation: move 5s ease 1s infinite forwards;
    }
    
    .C {
        width: 340px;
        height: 60px;
        padding-left: 80px;
        padding-top: 90px;
    }
    
    .c {
        font-size: 30px;
        line-height: 50px;
    }
    
    .s {
        width: 180px;
        height: 90px;
        border: 5px solid yellow;
        box-sizing: border-box;
        margin-left: 60px;
        margin-top: 180px;
        line-height: 20px;
    }
    
    .d {
        font-size: 30px;
        text-align: center;
    }
    
    .ab {
        width: 500px;
        height: 550px;
        z-index: 1;
        position: absolute;
        top: 300px;
        right: 250px;
        background-color: aqua;
    }
    
    .ac {
        width: 500px;
        height: 550px;
        background-color: #fde7a4;
        position: absolute;
        top: 200px;
        right: 180px;
    }
    
    .d:hover {
        color: red;
        font-size: 40px;
    }
    
    @keyframes move {
        0% {
            transform: scale(0.5, 0.7);
        }
        50% {
            transform: scale(0.7, 1);
        }
        100% {
            transform: scale(1, 1.3);
        }
        from {
            color: yellow;
        }
        to {
            color: rgb(72, 221, 201);
        }
    }
    
    a {
        color: white;
        text-decoration: none;
        font-size: 24px;
    }
    
    .aaa {
        width: 90px;
        height: 30px;
        display: inline-block;
        position: fixed;
        left: 140px;
        top: 10px;
    }
    
    .bbb {
        width: 120px;
        height: 30px;
        display: inline-block;
        position: fixed;
        left: 490px;
        top: 10px;
    }
    
    .ccc {
        width: 90px;
        height: 30px;
        display: inline-block;
        position: fixed;
        left: 900px;
        top: 10px;
    }
    
    .nnn {
        width: 90px;
        height: 30px;
        display: inline-block;
        position: fixed;
        left: 1250px;
        top: 10px;
    }
    
    a:hover {
        color: black;
        font-size: 30px;
    }
</style>

<body>
    <div class="container">

        <div class="black">
            <div class="aaa"><a href="#" target="blank">首页</a></div>
            <div class="bbb"><a href=" http://laver-rice.gitee.io/personal-website-a" target="blank">关于我的</a></div>




            <div class="A">
                <p class="a">Hello</p>
            </div>
            <div class="D">
                <p class="f">我是牛华梅</p>

            </div>

            <div class="C">
                <p class="c">---- 未来将成为成为一名 设计师</p>
            </div>
            <div class="s">
                <p class="d">雇佣我</p>
            </div>
        </div>
        <div class="yellow"></div>
        <div class="ccc"><a href=" http://laver-rice.gitee.io/personal-website-6" target="blank">作品集</a></div>
        <div class="nnn"><a href=" http://laver-rice.gitee.io/personal-web-sites" target="blank">联系我</a></div>
        <div class="ab"><img src="封面.jpg" alt="封面" height="550px" width="500px"></div>
        <div class="ac"></div>
    </div>

</body>

</html>